@charset "utf-8";

/* 引入重置样式 */
//@import "./css/reset.css;

// REM
@function r($px){
    @return ($px/40) * 1rem;    
}

// 减半
@function half($px){
    @return ($px/2) * 1px;    
}


*{
    margin: 0;
    padding: 0;
    list-style: none;
}

html,body{
    height: 100%;
    position: relative;
}


//头部
header{  
    position: absolute;
    top: 0;
    width: r(750);
    height: half(105);
    padding-top:22px;
    padding-left: half(22);
    padding-right: 10px;
    box-sizing: border-box;
        .Back{ 
          
            width: half(123);
            height: half(57);
               background-color: #ffffff;
                border-radius: half(20);
                border: solid 1px #ff9344;
                p{ 
                    width: half(123);
                     height: half(57);
                    text-align: center;
                    line-height: half(57);
                    font-size: half(26);
                    color: #000000;
                }
        } 
    h1{ 
            width: r(80);
            text-align: center;
            height: 18px;
            font-family: MicrosoftYaHei;
            font-size: 14px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 18px;
            letter-spacing: 0px;
            color: #000000;
            margin:0 auto;
          margin-top: 8px;
    }
    .selectbox{
               width: half(159);
                 height: half(56);
              background-image: url(../img/xiala.png);
              background-repeat: no-repeat;
              background-position: right 4px center;
              background-size: 14px 10px;
       select{
                    padding-left: 8px;
                  width: half(159);
                 height: half(56);
                 -webkit-appearance: none;
                 appearance: none;
                   border: solid 1px #ff9344;
                   background: transparent;
        }
    }
  
    
}

section{
    position: absolute;
    top: half(105);
    bottom:half(135);
    width: r(750);
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
  
    .search{
        margin:0 auto;
        margin-top: r(36);
        
        box-sizing: border-box;
        padding-right: half(20);
          width:r(266);
         height: half(51);
          background-color: #ffffff;
         border: solid r(2) #ff9344;
         border-radius: 25px;
         overflow: hidden;
        input[type="search"]{
             padding-left: 12px;
             padding-bottom: 1px;
              width:r(225);
             height: half(51);
              border: none;
              background: transparent;
              vertical-align: top;
              font-size: 12px;
          }
          input[type="image"]{
              width: half(29);
              height: half(30);
                vertical-align: top;
                margin-top: half(8);
          }
         
    }
     h1{        
                margin: half(33) auto half(14);
                text-align: center;
              width: r(200);
                height: r(30);
                font-family: MicrosoftYaHei;
                font-size: r(26);
                font-weight: normal;
                font-stretch: normal;
                line-height: r(30);
                letter-spacing: 0px;
                color: #000000;
          }
    .searchbox{
        margin: 0 auto;
        width: r(546);
        height: r(64);
            .smallb{
                margin-top: r(3);
                margin-left: r(5);
                width: r(125);
                height:  r(64);
                background-color: #dcdcdc;
                span{
                    display: block;
                    text-align: center;
                    width: r(125);
                    height:  r(64);
                    font-family: MicrosoftYaHei;
                    font-size: r(20);
                    font-weight: normal;
                    font-stretch: normal;
                    line-height:  r(64);
                    letter-spacing: 0px;
                    color: #898989;
                  
                }
            }
    }
    
    .youhui{ 
        width: r(750);
        height: half(105);
         background: white;   
        padding-left:half(21);
        padding-top: half(32);
        box-sizing: border-box;
        .youhui_logo{
            display: inline-block;
            width: half(220);
            height: half(62);
            vertical-align: top;
            img{
                width: half(32);
                height: half(47);            
            }
            p{                   
                box-sizing: border-box;
                height: half(62);
                font-family: MicrosoftYaHei;
                font-size: half(30);
                font-weight: normal;
                font-stretch: normal;
                line-height: half(62);
                padding-left: half(8);
                color: #000000;
            }
            
             .tjsst{
                 margin-top:4px ;
            width: half(41);
            height:half(40);
        }
        }
       
    }
    
        .youhui_more{ 
            display: inline-block;
            vertical-align: top;
            width: half(100);
            height: half(31);
            margin-top: half(19);
            margin-right: half(20);
            p{
                width:half(60);
                height: half(31);
                line-height:half(31);
                font-size: half(24);
                color: #000000;
                font-family: MicrosoftYaHei;
            }
            img{
                margin-left: half(8);
                width: half(25);
                height:half(31);
            }
        }
    
    .remenPhoto{
        margin-top: r(11);
        margin-bottom: r(15);
        box-sizing: border-box;
        padding-left: r(23);
        width: 100%;
        height: r(352);
           .rmLeft{
               width: r(279);
               height: r(352);
                  img{
                      width: r(279);
                      height: r(352);
                 }
           }
          .rmRight{
              margin-left: r(13);
              width: r(420);
              height: r(352);
              div{
                     width: r(420);
                          height: r(147);
                  img{
                        width: r(420);
                          height: r(147);
                  }
              }
                p{
                    width: r(420);
                    height: r(197);
                    margin-top: r(8);
                  
                   .remen3{
                       width: r(195);
                       height: r(197);
                   }
                   .remen4{  margin-left: r(12);
                       width: r(211);
                       height: r(197);
                   }
                }
         
          }
           
           
    }
    
    .tuijiansousuo{
        box-sizing: border-box;
        padding-left: r(23);
        padding-right: r(18);
         margin-top: r(11);
         margin-bottom: r(6);
        width: 100%;
        height: r(200);
        .tjss1{
            display: block;
            width: r(228);
            height: r(200);
        }
         .tjss2{
        display: block;
             margin: 0 auto;
            width: r(211);
            height: r(200);
        }
         .tjss3{
              display: block;
            width: r(220);
            height: r(200);
        }
    }
    
}

//底部
footer{ 
    position: absolute;
    bottom: 0;
    width:r(750);
    height: half(150);   
    .foot{ 
        box-sizing: border-box;
        padding-top: half(17);
        width:r(187.5);
        height: half(150);
        background: transparent;
        img{
            display: block;
            width: half(71);
            height: half(73); 
            margin:0 auto;
            margin-top: half(5);
        }
        p{ 
            
            height: half(35);
            font-size: half(25);          
            padding-top: half(10);
            text-align: center;
            a{
                color: black;
            }
           }
}
}